<template>
  <view class="order-product-component">
    <view class="order-product-body">
			<hsb-business-order-title-cell
				title="商品信息"
			/>
    	<view class="order-model-info">
				<view class="model-image">
					<image class="icon-model" :src="orderInfo.pic"></image>
				</view>
				<view class="model-name-options">
					<view class="model-name">{{ orderInfo.productName || '未知机型' }}</view>
					<view
						class="model-options"
						@click="openOptionsPopup"
					>
						<text>评估详情</text>
						<image class="icon-more" src="https://s1.huishoubao.com/static/web/recycle/icon_orders_more.png"></image>
					</view>
				</view>
			</view>
			<view
				v-if="orderInfo.reportUrl"
				class="report-warn-info"
			>
				<view class="report-desc">
					<view v-if="!reportInfo.isSameModel">检测机型与估价机型<text class="warn">不一致</text></view>
					<view v-else-if="orderInfo.diffCount > 0">检测详情与估价有<text class="warn">{{ orderInfo.diffCount || 0 }}</text>项差异</view>
					<view v-else>检测详情与估价一致</view>
				</view>
				<view
					class="report-more"
					@click="openReportPopup"
				>
					<text>查看报告</text>
					<image class="icon-more" src="https://s1.huishoubao.com/static/web/recycle/icon_orders_more.png"></image>
				</view>
			</view>
			<view class="order-prices-info">
				<view class="order-price-cell">
					<view class="cell-label">
						<text>预估回收价</text>
					</view>
					<view class="cell-value" :class="{ delete: orderInfo.detectPrice > 0 }">¥{{ orderInfo.quotationPrice / 100 || 0 }}</view>
				</view>
				<view
					v-if="orderInfo.detectPrice > 0"
					class="order-price-cell"
				>
					<view class="cell-label">
						<text>专业检测价</text>
					</view>
					<view class="cell-value">¥{{ orderInfo.detectPrice / 100 || 0 }}</view>
				</view>
				<view
					v-if="orderInfo.addPrice > 0"
					class="order-price-cell"
				>
					<view class="cell-label">
						<text>优惠总价</text>
					</view>
					<view class="cell-value">¥{{ orderInfo.addPrice / 100 || 0 }}</view>
				</view>
				<view
					v-if="orderInfo.orderType === '2'"
					class="order-price-cell"
				>
					<view class="cell-label">
						<text>已付预付款</text>
						<image class="icon-zm" src="@/static/images/icon_order_zm.png"></image>
					</view>
					<view class="cell-value">-¥{{ orderInfo.prepayPrice / 100 || 0 }}</view>
				</view>
				<view class="total-prices">
					<template v-if="orderInfo.orderType === '2'">
						<view>{{ orderInfo.detectPrice > 0 ? '实际' : '预估' }}尾款：<text class="prices">{{ orderInfo.negative ? '-¥'+(orderInfo.lastPriceNum / 100 || 0) : '¥'+(orderInfo.lastPrice / 100 || 0) }}</text></view>
					</template>
					<template v-else>
						<view v-if="orderInfo.recoveryPrice > 0">回收价：<text class="prices">¥{{ orderInfo.recoveryPrice / 100 || 0 }}</text></view>
						<view v-else>预估总价：<text class="prices">￥{{ orderInfo.quotationTotalPrice / 100 || 0 }}</text></view>
					</template>
				</view>
			</view>
    </view>
		<uv-popup
			ref="optionPopup"
			mode="bottom"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-user-options
				:productName="orderInfo.productName"
				:list="orderInfo.evaluateOptions || []"
				@close="closeOptionsPopup"
			/>
		</uv-popup>
		<uv-popup
			ref="reportPopup"
			mode="bottom"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-detect-report
				:reportInfo="reportInfo"
				@report="jumpReport"
				@close="closeReportPopup"
			/>
		</uv-popup>
  </view>
</template>

<script>
export default {
	props: {
		orderInfo: Object,
		reportInfo: Object
	},
	methods: {
		openOptionsPopup () {
			this.$refs.optionPopup.open()
		},
		closeOptionsPopup () {
			this.$refs.optionPopup.close()
		},
		openReportPopup () {
			this.$refs.reportPopup.open()
		},
		closeReportPopup () {
			this.$refs.reportPopup.close()
		},
		jumpReport () {
			this.closeReportPopup()
			if (this.reportInfo.reportUrl) {
				uni.navigateTo({
					url: `/pages/webview/index?webUrl=${encodeURIComponent(this.reportInfo.reportUrl)}`
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>